{extend name="property/public/insidePageBase" /}
{block name="title"}添加账单{/block}
{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs10">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">账单编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="number" disabled id="bill-number" placeholder="账单编号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs2">
                    <button type="button" class="layui-btn layui-btn-fluid" id="addOtherFee">添加明细</button>
                </div>
            </div>

            <div class="layui-form-item"><div id="otherFeeBox"></div></div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <button type="button" class="layui-btn layui-btn-primary replaceUploadImg toggleUpload" lay-data="{}"></button>
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<script id="otherFeeTpl" type="text/html">
    {{# layui.each(d, function(index,item) { }}
    <div class="layui-row">
        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
            <div class="layui-input-group">
                <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;费用类别&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <select name="other_fee[{{index}}][cate_id]" data-index="{{index}}" lay-filter="other_fee_bill_cate">
                    <option value="">请选择</option>
                    {foreach $cateNameData as $k=>$v}
                    {if isset($v['children']) && $v['children']}
                    <optgroup label="{$v['label']}">
                        {foreach $v['children'] as $k2=>$v2}
                        <option value="{$v2['value']}" {{# if(item.cate_id == {$v2['value']}) { }} selected {{# } }}>{$v2['label']}</option>
                        {/foreach}
                    </optgroup>
                    {else/}
                    <option value="{$v['value']}" {{# if(item.cate_id == {$v['value']}) { }} selected {{# } }}>{$v['label']}</option>
                    {/if}
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
            <div class="layui-input-group">
                <input type="text" maxlength="8" name="other_fee[{{index}}][amount]" value="{{ item.amount }}"  data-index="{{index}}"  autocomplete="off" class="layui-input other_amount" placeholder="请输入费用" />
                <div class="layui-input-split layui-input-suffix">¥</div>
            </div>
        </div>
        <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
            <div class="layui-input-group charge_time" id="charge_time_{{index}}">
                <div class="layui-input-split layui-input-prefix indispensable">计费周期</div>
                <input type="text" name="other_fee[{{index}}][start_date]" value="{{ item.start_date }}" id="startDate" data-index="{{index}}" placeholder="起租日期" class="layui-input charge_config_start_time">
                <div class="layui-input-split layui-input-suffix">-</div>
                <input type="text" name="other_fee[{{index}}][end_date]" value="{{ item.end_date }}" id="endDate" data-index="{{index}}"  placeholder="结束日期" class="layui-input charge_config_end_time">
            </div>
        </div>
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">
            <button type="button" class="layui-btn layui-btn-danger delOtherFee" data-index="{{index}}">删除</button>
        </div>
    </div>
    {{# }); }}
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer','laydate','laytpl'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,laydate = layui.laydate,laytpl = layui.laytpl;
        laydate.render({
            elem: '.day-time'
        });
        var otherData = []
        $('#addOtherFee').on('click', function() {
            otherData.push({
                cate_id:0,
                amount:0,
                start_date:'',
                end_date:'',
            })
            loadOtherFeeTpl();
        });
        $(document).on('click', '.delOtherFee', function() {
            otherData.splice($(this).data('index'), 1);
            loadOtherFeeTpl();
        });
        form.on('select(other_fee_bill_cate)', function(elem) {
            otherData[$(elem.elem).data('index')].cate_id = elem.value;
            loadOtherFeeTpl();
        })
        $(document).on('change', '.other_amount', function() {
            otherData[$(this).data('index')].amount = $(this).val();
            loadOtherFeeTpl();
        });
        $(document).on('change', '.other_start_date', function() {
            otherData[$(this).data('index')].start_date = $(this).val();
            loadOtherFeeTpl();
        });
        $(document).on('change', '.other_end_date', function() {
            otherData[$(this).data('index')].end_date = $(this).val();
            loadOtherFeeTpl();
        });

        function loadOtherFeeTpl() {
            var getTpl = otherFeeTpl.innerHTML
                ,view = document.getElementById('otherFeeBox');
            laytpl(getTpl).render(otherData, function(html){
                view.innerHTML = html;
                $('.charge_time').each(function(index) {
                    laydate.render({
                        elem: this,
                        type: 'date',
                        value: (otherData[index].start_date && otherData[index].end_date) ? otherData[index].start_date+' - '+otherData[index].end_date : '',
                        range: true,
                        done: function(value, date, endDate){
                            let times = value.split(' - ')
                            otherData[index].start_date = times[0]
                            otherData[index].end_date = times[1]
                            $('input[name="other_fee['+index+'][start_date]"]').val(times[0])
                            $('input[name="other_fee['+index+'][end_date]"]').val(times[1])
                        }
                    });
                });
                form.render()
            });
        }
        function loadPropertyUnitList() {
            $.get('{:request()->url()}', {get_type:'roomData'}, function(res) {
                if(res.code == 0) {
                    $('#bill-number').val(res.data.number)
                }
            })
        }
        loadPropertyUnitList()
    });
</script>
{/block}